<?php

/**************************自定义的前端模板方法***********************************/

/**
 * @desc 四级菜单
 * @return string
 */
function tpl_fourth_menu()
{
    // 获取菜单列表
    $url = \think\facade\Request::baseUrl();
    $menuList = \app\admin\service\MenuService::getFourthMenu($url);
    if (empty($menuList))
    {
        return '';
    }

    // 拼装html
    $html = '<div class="layui-tab layui-tab-brief">';
    $html .= '<ul class="layui-tab-title">';
    foreach ($menuList as &$item)
    {
        $href = $item['href'];
        $title = $item['title'];
        if ($item['checked'])
        {
            $html .= '<li class="layui-this">';
            $html .= '<a href="' . $href .'" style="color:#009688"> ' . $title . '</a>';
        } else {
            $html .= '<li>';
            $html .= '<a href="' . $href .'"> ' . $title . '</a>';
        }
        $html .= '</li>';
    }
    $html .= '</ul><div style="height:30px;"></div>';
    return $html;
}

/**
 * @desc 单图上传
 * @param $img
 * @param $name
 * @return string
 */
function tpl_upload_image($img, $name)
{
$picSrc = $img ??  '/static/img/system/add.png';

$html = <<<EOT
<div class="layui-input-block">
    <div class="upload-body">
        <input class="form-img-name" type="hidden" value="{$img}" name="{$name}"/>
        <div class="upload-img-box {if empty($img)}border-eee{/if}">
            <img src="{$picSrc}" />
        </div>
        <div class="upload-img-act {if empty($img)}layui-hide{/if}">
            <i title="图片预览" class="iconfont iconreview js-preview"></i>
            <i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
        </div>
    </div>
</div>
<script>
    let that;
    $('.upload-img-box').click(function(){
        that = $(this);
        openAlbum(putdata);
    })
    let putdata = function(res){
        that.find('img').attr('src', res[0].pic);
        that.parents('.upload-body').find('.form-img-name').val(res[0].pic);
        that.removeClass('border-eee');
        that.parents('.upload-body').find('.upload-img-act').removeClass('layui-hide');
    }
    // 图片预览
    $(".js-preview").click(function(){
        let photoObj = {}, photos = [];
        let picSrc = $(this).parents('.upload-body').find('.upload-img-box').find('img').attr('src');
        photos.push({src: picSrc});
        photoObj.data = photos;
        layer.photos({
            photos: photoObj
            ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
        });
    })
    // 图片删除
    $(".js-delete").click(function(){
        $(this).parents('.upload-body').find('.upload-img-box').find('img').attr('src', '/static/img/system/add.png');
        $(this).parents('.upload-body').find('.form-img-name').val('');
        that.parents('.upload-body').find('.upload-img-act').addClass('layui-hide');
    })
</script>
EOT;
return $html;
}

function tpl_upload_image_multi($imgs, $name)
{
    $_html = '';
    if (!empty($imgs))
    {
        foreach ($imgs as $img)
        {

            $_html .= '<div class="upload-body-item">';
            $_html .= '<input class="form-img-name" type="hidden" value="' . $img . '" name=" ' . $name . '" />';
            $_html .= '<div class="upload-img-box">';
            $_html .= '<img src="' . $img . '" />';
            $_html .= '</div>';
            $_html .= '<div class="upload-img-act">';
            $_html .= '<i title="图片预览" class="iconfont iconreview" onclick="multi_preview(this)"></i>';
            $_html .= '<i title="删除图片" class="layui-icon layui-icon-delete js-delete" onclick="multi_delete(this)"></i>';
            $_html .= '</div></div>';
        }
    }

    $html = <<<EOT
<div class="layui-input-block">
    <div class="multi-upload-body">
        <div class="upload-body-list">{$_html}</div>
        <div class="upload-body upload-body-item">
            <input class="form-img-name" type="hidden" value="" name=""/>
            <div class="upload-img-multi-box border-eee">
                <img src="/static/img/system/add.png" />
            </div>
        </div>
    </div>
</div>
<script>
    // 多图上传
	$(".upload-img-multi-box").click(function(){
		openAlbum(multi_putdata);
	})
	let multi_putdata = function(res){
		$.each(res, function(idx, val){
			let html = '';
			html += '<div class="upload-body-item">';
			html += '<input class="form-img-name" type="hidden" value="' + val.pic  +'" name="form[pic][]" />';
			html += '<div class="upload-img-box">';
			html += '<img src="' + val.pic + '" />';
			html += '</div>';
			html += '<div class="upload-img-act">';
			html += '<i title="图片预览" class="iconfont iconreview" onclick="multi_preview(this)"></i>';
			html += '<i title="删除图片" class="layui-icon layui-icon-delete js-delete" onclick="multi_delete(this)"></i>';
			html += '</div></div>';
			$(".upload-body-list").append(html);
		})
	}
	// 多图上传 预览
	function multi_preview(obj){
		let photoObj = {}, photos = [];
		let picSrc = $(obj).parents('.upload-body-item').find(".upload-img-box").find('img').attr('src');
		photos.push({src: picSrc});
		photoObj.data = photos;
		console.log(photoObj)
		layer.photos({
			photos: photoObj
			,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
		});
	}

	// 多图上传 删除
	function multi_delete(obj){
		$(obj).parents('.upload-body-item').remove();
	}
</script>
EOT;
    return $html;
}